<template>
  <el-form>
  <table class="table_border" style="width:100%">
    <tbody>
    <tr>
      <td class="t_left">
        <span>登录名&nbsp;</span>
        <span style="color:red">*</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="login" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span>用户姓名&nbsp;</span>
        <span style="color:red">*</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="username" clearable>

        </el-input>
      </td>
    </tr>
    <tr>
      <td class="t_left">
        <span>密码&nbsp;</span>
        <span style="color:red">*</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="pw" clearable type="password">

        </el-input>
      </td>
      <td class="t_left">
        <span>确认密码&nbsp;</span>
        <span style="color:red">*</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="pw2" clearable type="password">

        </el-input>
      </td>
    </tr>
    <tr>

      <td class="t_left">
        <span style="color:red"></span>
        <span>用户编号&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="userno" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span>状态&nbsp;</span>
        <span style="color:red">*&nbsp;</span>
      </td>
      <td>
        <el-select v-model="status" placeholder="请选择" style="width:60%" size="mini">
          <el-option v-for="item in selects2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </td>
    </tr>

    <tr>
      <td class="t_left">
        <span style="color:red"></span>
        <span>生日&nbsp;</span>
      </td>
      <td>
        <el-date-picker v-model="birthday" class="el-rows-kj-sugon" style="width:60%" type="date" size="mini" placeholder="选择日期">
        </el-date-picker>
      </td>
      <td class="t_left">
        <span>性别&nbsp;</span>
        <span style="color:red">&nbsp;</span>
      </td>
      <td>
        <el-select v-model="sex" placeholder="请选择" style="width:60%" size="mini" width="100%">
          <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </td>
    </tr>
    <tr>
      <td class="t_left">
        <span style="color:red"></span>
        <span>地区&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="nativeplace" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span style="color:red"></span>
        <span>电话&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="telephone" clearable>

        </el-input>
      </td>

    </tr>
    <tr>
      <td class="t_left">
        <span style="color:red"></span>
        <span>政治面貌&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="zjmm" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span style="color:red"></span>
        <span>职务&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="headship" clearable>

        </el-input>
      </td>
    </tr>
    <tr>
      <td class="t_left">
        <span style="color:red"></span>
        <span>传真&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="fax" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span style="color:red"></span>
        <span>邮件&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="email" clearable>

        </el-input>
      </td>
    </tr>
    <tr>
      <td class="t_left">
        <span style="color:red"></span>
        <span>扩展字段1&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="extend1" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span style="color:red"></span>
        <span>扩展字段2&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="extend2" clearable>

        </el-input>
      </td>
    </tr>
    <tr>
      <td class="t_left">
        <span style="color:red"></span>
        <span>扩展字段3&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="extend3" clearable>

        </el-input>
      </td>
      <td class="t_left">
        <span style="color:red"></span>
        <span>扩展字段4&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="extend4" clearable>

        </el-input>
      </td>
    </tr>
    <tr>
      <!-- <td class="t_left">
        <span style="color:red"></span>
        <span>组织部门 &nbsp;:&nbsp;</span>
      </td>
      <td>
        <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="orgname" disabled>

        </el-input>
      </td> -->
      <td class="t_left">
        <span style="color:red"></span>
        <span>备注&nbsp;:&nbsp;</span>
      </td>
      <td>
        <el-input type="textarea" placeholder="请输入内容" style="width:80%" size="mini" v-model="bz" clearable>
        </el-input>
      </td>

    </tr>

    </tbody>
  </table>
  <el-button @click="conso">取 消</el-button>
  <el-button type="primary" style="width:100%;" @click="updatePass"> 确认 </el-button>
  </el-form>
  <!--<div>-->
    <!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
    <!--<el-button type="primary" @click="submitAdd">确 定</el-button>-->
  <!--</div>-->
</template>
<script>
export default {
  // 全局变量区
  data() {
    return {
      ids: [],
      title: '',
      queryArr: {
        param: ''
      },
      input: '',
      value: '请选择',
      loading: false,
      isShow: false,
      data: [
        {
          label: '组织结构',
          id: 1,
          children: [
            {
              label: '贵港市',
              id: 2,
              children: [
                {
                  label: '贵城街道',
                  id: 2 - 1
                },
                {
                  label: '吴乐镇',
                  id: 2 - 2
                }
              ]
            },
            {
              label: '市药品监督管理局',
              id: 3
            },
            {
              label: '市民政局',
              id: 4
            },
            {
              label: '市人社局',
              id: 5
            },
            {
              label: '市交通局',
              id: 6
            }
          ]
        }
      ],
      treedata: {
        children: 'children',
        label: 'label'
      },
      tableData: [],
      sysid: '',
      sysname: '',
      homepage: '',
      rootuser: '',
      currentPage: 1,
      totals: 0,
      pageNum: 1,
      pageSize: 20,
      treey: false,
      dialogFormVisible: false
    }
  },
  // 函数区
  methods: {
    //路由
    conso(){
      this.$router.push({ path: '/yyh'})
    },
    // 1)显示与搜索,
    queryList() {
      let datas = {}
      datas.pageSize = this.pageSize
      datas.pageNum = this.pageNum
      this.$store
        .dispatch('SysQueryList', datas)
        .then(res => {
          this.tableData = res.list
          this.totals = this.tableData.length
        })
        .catch(() => {
        })
    },
    // 2.1)新增模态框
    addOne() {
      this.title = '新增'
      this.dialogFormVisible = true
      this.sysname = ''
      this.homepage = ''
      this.rootuser = ''
    },
    // 2.2)编辑模态框
    update(res) {
      this.title = '修改'
      this.dialogFormVisible = true
      this.sysid = res.sysid
      this.sysname = res.sysname
      this.homepage = res.homepage
      this.rootuser = res.rootuser
    },
    // 2.3)发送新增和修改的请求
    submitAdd() {
      let datas = {}
      datas.sysid = this.sysid
      datas.sysname = this.sysname
      datas.homepage = this.homepage
      datas.rootuser = this.rootuser
      if (datas.sysname && datas.homepage && datas.rootuser) {
        if (this.title === '新增') {
          this.$store
            .dispatch('SysAdd', datas)
            .then(() => {
              this.dialogFormVisible = false
            })
            .catch(() => {
            })
        } else {
          this.$store
            .dispatch('SysUpdate', datas)
            .then(() => {
              this.dialogFormVisible = false
            })
            .catch(() => {
            })
        }
        this.queryList()
      } else {
        this.$message('请确认密码正确或输入完整内容')
      }
    },
    // 3.1)批量选择
    byIds(res) {
      if (res.length) {
        for (let i = 0; i < res.length; i++) {
          var ids
          if (!ids) {
            ids = res[i].sysid
          } else {
            ids = ids + ',' + res[i].sysid
          }
          this.sysids = ids
        }
      } else {
        this.sysids = ''
      }
      return this.sysids
    },
    // 3.2)批量删除
    deleteAll() {
      if (!this.sysids) {
        this.$message('请选择要删除的数据')
      } else {
        this.$store.dispatch('SysDelete', this.sysids).then(() => {
          this.queryList()
        }).catch(() => {
        })
      }
    },
    // 3.3)单个删除
    deletes(res, type) {
      if (type === 'delete') {
        this.ids = res.sysid
      }
      if (this.ids.length === 0) {
        this.$message('请选择要删除的数据')
      } else {
        this.$store
          .dispatch('SysDelete', this.ids)
          .then((response) => {
            this.queryList()
          })
          .catch(() => {
          })
      }
    },
    // 4.1)选页数
    handleSizeChange(val) {
      (this.pageSize = val), this.queryList()
    },
    // 4.2)选条数
    handleCurrentChange(val) {
      this.pageNum = val
      this.queryList()
    },
    // 5）跳转进入隐藏路由
    subsystem(res) {
      this.$router.push({ path: '/subsys?sysid=' + res.sysid })
    }
  },
  // 渲染时启动
  created() {
    // this.queryList()
  }
}
</script>
<style scoped>
.cell {
  text-align: center;
}
.table_border {
    width: 100%;
    border: 0.06rem solid #ebeef5;
  }

.table_border td {
  padding: 0.5rem;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.t_left {
  width: 30%;
}
.el-input {
  width: 60%;
}
</style>
